<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景色</title>
    <style>

        div {
            width: 300px;
            height: 300px;
            border: 10px solid red;
            background-color:green;
            background-color:rgba(255,107,37,1);
            background-color: #008800;      /*#080*/
            background-color: #0f0;
        }
    </style>
</head>
<body>
    <!--
        内容和背景的区别：
            内容可以被选中，内容可以把容器的宽高撑起来
            背景不会占用容器的宽高，但是背景色会铺满整个容器；

            例如：气球的颜色和大小

    -->

    <!--
            background-color   颜色的单词   rgba   16进制颜色   transparent-----背景透明(默认值）
            背景色会充满整个容器       例子：有颜色的气球
    -->
    <div>
        <!--这是一段文字-->
        <!--<img src="images/img.jpg">-->
    </div>
</body>
</html>